<!DOCTYPE html>
<html>
	<head>
		<title>Hover Zoom Options</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<style type="text/css">
			#body { margin: 0 auto; width: 50em;  }
			#container {float: left; margin: 1em;}
			#icon { float: left; margin-top: 2em }
			#tabs { width: 30em; min-height: 19em; }
			#tabs li { font-size: 10pt; }
			#title { font-size: 1.5em }
			#selExcludedSites, #txtAddExcludedSite { width: 23em; }
			#excludedSites button { width: 5em; }
			#messages { padding: 1em; max-width: 28em; height: 3em; }
			#saved { display: none; background-color: #ffd; padding:.5em; }
			#saved p { font-size: 9pt; }
			#title, #buttons, #about, #about p, #messages p { text-align: center }
			#delays p, #delays input, #txtPicturesOpacity { text-align: right }
			.notice { font-size: 8pt; }
			.hint { font-size: 8pt; padding-left: 25px; display: block; }
			.hint, .hint a { color: #555; }
			#sliderPicturesOpacity { font-size: 0.7em; margin-bottom: 0.5em }
			hr { margin: 0.7em 0 }
			.actionKey { line-height: 14px; margin-top: 10px; }
			#optionTab5 p { margin-bottom: 10px; }
		</style>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery-ui.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/options.js"></script>
	</head>
	<body>
		<div id="body">
			<img id="icon" src="../images/icon128.png">
			<div id="container">
				<h1 id="title">Hover Zoom Options</h1>
				<div id="tabs">
					<ul>
						<li><a href="#optionTab1">General</a></li>
						<li><a href="#optionTab2">Sites</a></li>
						<li><a href="#optionTab3">Action keys</a></li>
						<li><a href="#optionTab4">Advanced</a></li>
						<li><a href="#optionTab5">Support the project</a></li>
					</ul>
					<div id="optionTab1">
						<p><input type="checkbox" id="chkExtensionEnabled"> <label for="chkExtensionEnabled">Enable Hover Zoom</label></p>
						<h2>View</h2>
						<p><input type="checkbox" id="chkMouseUnderlap"> <label for="chkMouseUnderlap">Extend zoomed images below the mouse cursor<br>
							<span class="hint">If unchecked, zoomed images will be resized dynamically.</span></label></p>
						<p><input type="checkbox" id="chkPageActionEnabled"> <label for="chkPageActionEnabled">Show icon in address bar<br>
							<span class="hint">(Only when images can be zoomed)</span></label></p>
						<p><input type="checkbox" id="chkShowCaptions"> <label for="chkShowCaptions">Show pictures captions<br>
							<span class="hint">(When available)</span></label></p>
						<p><input type="checkbox" id="chkShowWhileLoading"> <label for="chkShowWhileLoading">Show zoomed pictures while loading</label></p>
						<p><input type="checkbox" id="chkShowHighRes"> <label for="chkShowHighRes">Show high resolution pictures when available<br>
							<span class="hint">Pictures may take more time to load.</span></label></p>
						<h2>Delays</h2>
						<div id="delays">
						<p><label for="txtDisplayDelay">Delay before displaying a picture</label>: <input type="text" id="txtDisplayDelay" size="2"> sec.</p>
						<p><label for="txtFadeDuration">Fading animation duration</label>: <input type="text" id="txtFadeDuration" size="2"> sec.</p>
						</div>
					</div>
					<div id="optionTab2">
						<h2><span id="Dis-enable">Disable</span> Hover Zoom for specific sites</h2>
						<p>Enter URLs for which Hover Zoom must be <span id="Dis-enabled">disabled</span>.</p>
						<p><i>Examples: facebook.com, google.com/reader</i></p>
						<table id="excludedSites"><tr><td><input type="text" id="txtAddExcludedSite"></td>
						<td><button id="btnAddExcludedSite" onclick="btnAddExcludedSiteOnClick()">Add</button></td></tr>
						<tr><td><select id="selExcludedSites" size="8"></select></td>
						<td><button id="btnRemoveExcludedSite" onclick="btnRemoveExcludedSiteOnClick()">Remove</button><br>
						<button id="btnClearExcludedSites" onclick="btnClearExcludedSitesOnClick()">Clear</button></td></tr></table>
						<p class="notice">Be aware that domain filters can overlap. Example: if you have filtered "picasaweb.google.com" and "google.com", removing "picasaweb.google.com" will not reactivate Picasa Web Albums, as it will still be excluded by the "google.com" filter.</p>
						<h2><input type="checkbox" id="chkWhiteListMode"> <label for="chkWhiteListMode">White list mode</label></h2>
						<p>If this box is checked, Hover Zoom will be enabled <em>only</em> for the sites listed above.</p>
					</div>
					<div id="optionTab3">
						<table id="tableActionKeys">
						</table>
					</div>
					<div id="optionTab4">
						<h2>Advanced options</h2>
						<p><input type="checkbox" id="chkUpdateNotifications"> <label for="chkUpdateNotifications">Show update notifications</label><br>
							<span class="hint"><a href="javascript:" onclick="showUpdateNotification();">Show latest</a></span></p>
						<p><input type="checkbox" id="chkAddToHistory"> <label for="chkAddToHistory">Add viewed pictures to the browser's history</label></p>
						<p><input type="checkbox" id="chkFilterNSFW"> <label for="chkFilterNSFW">Exclude NSFW images (Reddit only)</label></p>
						<p><input type="checkbox" id="chkAlwaysPreload"> <label for="chkAlwaysPreload">Automatically preload zoomed images<br>
							<span class="hint">(This may consume a lot of bandwidth)</span></label></p>
						<hr>
						<p><label for="txtPicturesOpacity">Zoomed pictures opacity</label>: <input type="text" id="txtPicturesOpacity" size="2"> %
						<div id="sliderPicturesOpacity"></div>
						<div class="notice"><span>Transparent</span><span style="float: right">Opaque</span></div></p>
					</div>
					<div id="optionTab5">
						<h2>Support Hover Zoom Development</h2>
						<p>Hover Zoom is distributed for free and is supported via affiliate links. You can show your support to the project by keeping this option enabled, or you can disable it.</p>
						<p><b>What will happen if I enable affiliate links?</b><br>
						Some contextual ads will be displayed amongst Facebook regular ads every once in a while. These ads were designed to be unobtrusive and won't degrade your user experience. Hover Zoom does not block or replace existing ads.</p>
						<p>Note: affiliate links won't be displayed if you use an ad blocking extension such as AdBlock.</p>
						<p><b>Will I lose functionality if I disable affiliate links?</b><br>
						No, enabling affiliate links is only a way to show your support to the project's development.</p>
						<p><input type="radio" id="radEnableAds" name="radEnableAds" class="radEnableAds" value="1"> <label for="radEnableAds"><b>Yes, I want to support this project by enabling affiliate links.</b></p>
						<p><input type="radio" id="radDisableAds" name="radEnableAds" class="radEnableAds" value="2"> <label for="radDisableAds">No, I don't want to enable affiliate links.</p>
						<p id="pAdsMessage">Thanks for your support!</p>						
						<input type="hidden" id="hidEnableAds">
					</div>
				</div>
				<div id="buttons">
					<button id="btnSave">Save</button>
					<button id="btnReset">Reset</button>
				</div>
				<div id="messages">
					<div id="saved"><p>Options saved.<br>Some settings may need a page refresh.</p></div>
				</div>
				<div id="about">
					<p><a target="_blank" href="http://code.google.com/p/hoverzoom/">Home page</a> - 
					<a target="_blank" href="http://code.google.com/p/hoverzoom/issues/list">Report a bug</a></p>
					
					<!-- Google +1 -->
					<div class="g-plusone" data-size="small" data-href="https://chrome.google.com/webstore/detail/nonjdcjchghhkdoolnlbekcfllmednbl"></div>
					<script src="../js/g-plusone.js"></script>
					
					<!-- Facebook Like -->
					<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FHover-Zoom%2F121453051234637&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21&amp;ref=options_page" style="border:none; overflow:hidden; width:100px; height:21px; vertical-align: middle;"></iframe>					
					
					<p><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=C8VC69MYY8AZG&lc=US&item_name=Romain%20Vallet&item_number=Hover%20Zoom&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted">Donations appreciated</a>!
					</p>
					<p>Version <span id="versionNumber"></span> - &copy; 2012 Romain Vallet</p>
				</div>
			</div>
		</div>
	</body>
</html>